<form class="layui-form" action="">
  <div class="layui-col-space1 layui-row">
    &nbsp;
    <div class="layui-form-item">
      <div class="layui-inline">

        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
          <input type="text" name="name" required autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">学生号</label>
        <div class="layui-input-inline">
          <input type="text" name="SID" required autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">年级</label>
        <div class="layui-input-inline">
          <select name="classNO" lay-search="">
            <option value=""></option>
            <option value="7">七年级</option>
            <option value="8">八年级</option>
            <option value="9">九年级</option>
          </select>
        </div>
        <label class="layui-form-label">班级</label>
        <div class="layui-input-inline">
          <select name="classNO" lay-search="">
            <option value="">直接选择或搜索选择</option>
            <option value="1">layer</option>
            <option value="2">form</option>
          </select>
        </div>

        <div class="layui-form-mid" style="padding: 0!important;">
          <button class="layui-btn" lay-submit lay-filter="formDemo">查找</button>
        </div>
      </div>
    </div>
</form>
<table id="studentinfotable" lay-filter="test"></table>
<script type="text/html" id="bar1">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbar1">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script>
  function init() {
    layui.use(['form', 'table'], function () {
      var form = layui.form;
      var table = layui.table;
      form.render();
      //提交
      form.on('submit(formDemo)', function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
      });
      table.render({
        elem: '#studentinfotable'
        , url: "/getstudentlist"
        , toolbar: 'default'
        , cols: [[ //表头
          { field: 'ID', title: 'ID', width: 180, sort: true, fixed: 'left' }
          , { field: 'name', title: '姓名', width: 80 }
          , { field: 'kc', title: '性别', width: 80, sort: true }
          , { field: 'bj', title: '班级', width: 80 }
          , { field: 'kh', title: '学籍号', width: 177 }
          , { field: 'edit', title: '编辑', toolbar: '#bar1', width: 200 }

        ]]
      });
      //监听工具条
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
          layer.msg('ID：' + data.ID + ' 的查看操作');
        } else if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            obj.del();
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          layer.alert('编辑行：<br>' + JSON.stringify(data))
        }
      });
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
          case 'add':
            layer.msg('添加');
            break;
          case 'delete':
            layer.msg('删除');
            break;
          case 'update':
            layer.msg('编辑');
            break;
        };
      });
    });

  }
</script>